
// 参数控制
function createPanel() {
    var crossFadeControls = []
    const panel = new GUI( { width: 310 } );
    const folder1 = panel.addFolder( '测试1' );
    const folder2 = panel.addFolder( '测试2' );

    var inputs = new function () {
        this.rotationSpeed = 0.02;
    };
    panel.add(inputs, 'rotationSpeed');

    const settings = {
        '勾选':true,
        '输入值':'请输入',
        '滑块':2,
        '按钮':function(){
            console.log('按钮')
        },
        '切换1':function(){
            crossFadeControls[0].setEnabled()
            crossFadeControls[1].setDisabled()
        },
        '切换2':function(){
            crossFadeControls[0].setDisabled()
            crossFadeControls[1].setEnabled()
        }
    }

    folder1.add(settings,'勾选').onChange( function(isSlected){
        console.log('isSlected',isSlected)
    })
    folder1.add(settings,'输入值').onChange( function(value){
        console.log('value',value)
    })
    folder1.add(settings,'滑块',0,10,1).onChange( function(sliderValue){
        console.log('sliderValue',sliderValue)
    })
    folder1.add(settings,'按钮')
    crossFadeControls.push(folder1.add(settings,'切换1'))
    crossFadeControls.push(folder1.add(settings,'切换2'))

    crossFadeControls.forEach( function ( control ) {

        control.classList1 = control.domElement.parentElement.parentElement.classList;
        control.classList2 = control.domElement.previousElementSibling.classList;

        control.setDisabled = function () {

            control.classList1.add( 'no-pointer-events' );
            control.classList2.add( 'control-disabled' );

        };

        control.setEnabled = function () {

            control.classList1.remove( 'no-pointer-events' );
            control.classList2.remove( 'control-disabled' );

        };

    } );

    var palette = {
        color1: '#FF0000', // CSS string
        color2: [ 0, 128, 255 ], // RGB array
        color3: [ 0, 128, 255, 0.3 ], // RGB with alpha
        color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
      };
      folder2.addColor(palette, 'color1');
      folder2.addColor(palette, 'color2');
      folder2.addColor(palette, 'color3');
      folder2.addColor(palette, 'color4');

    folder1.open();
}

createPanel()